<template>
  <div
    class="rrweb"
    @mousedown="handleDown"
    @mousemove="handleMove"
    @mouseleave="handleLeave"
    ref="rrwebRef"
  >
    <svg-icon :name="name" :myStyle="style" @click="handleRecord" />
    <svg-icon :name="`gengduo`" :myStyle="style" @click="playRecord" />
  </div>
</template>
  
<script lang="ts">
import {
  defineAsyncComponent,
  defineComponent,
  onUnmounted,
  reactive,
  toRefs,
} from "@vue/runtime-core";
import * as rrweb from "rrweb";
import { RRwebPlayerOptions } from "rrweb-player";
import "rrweb-player/dist/style.css";
import pako from "pako";
import { ElMessage } from "element-plus";
import { eventWithTime, listenerHandler } from "rrweb/typings/types";
import { getDate } from "@/utils/util";
import { useRoute, useRouter } from "vue-router";

export default defineComponent({
  name: "RrWeb",
  components: {
    TyFloat: defineAsyncComponent(
      () => import("@/components/tyFloat/index.vue")
    ),
  },
  setup() {
    const router = useRouter();
    const route = useRoute();

    const state = reactive({
      rrwebRef: {} as HTMLElement,
      events: [] as Array<eventWithTime | any>,
      eventsList: [] as Array<Object>,
      index: 0 as number,
      replayer: {} as RRwebPlayerOptions,
      rrweb: Function() as listenerHandler | undefined,
      style: { fontSize: "42px", cursor: "pointer" },
      downTime: 0,
      move: false,
      startRecord: false,
      name: "kaishiluzhi",
    });

    // 点击录制/停止录制
    const handleRecord = () => {
      if (!state.move) {
        if (!state.startRecord) {
          // 开启录制
          state.rrweb = rrweb.record({
            emit(event) {
              state.events.push(event);
              console.log(state.index);
              state.index++;
            },
            recordCanvas: true,
          });
          ElMessage({
            message: "开启视频录制",
            type: "success",
          });
          state.startRecord = true;
          state.name = "jieshuluzhi";
        } else {
          // 停止录制
          state.rrweb && state.rrweb();
          state.eventsList.unshift({
            name: "视频录制",
            time: getDate(),
            event: state.events,
          });
          state.events = [];

          // 保存录像
          const record = JSON.stringify(state.eventsList);
          localStorage.setItem("record", zip(record));

          state.startRecord = false;
          state.name = "kaishiluzhi";
        }
      }
      handleReset();
    };

    // 播放录制
    const playRecord = () => {
      if (!state.move) {
        if (route.fullPath === "/luxiang/rrweb") {
          ElMessage({
            message: "已在当前页面",
            type: "warning",
          });
        } else {
          router.push("/luxiang/rrweb");
        }
      }
    };

    // 压缩
    const zip = (str: string) => {
      const binaryString = pako.gzip(str, { to: "string" });
      return window.btoa(binaryString);
    };

    // 解压
    const unzip = (b64Data: string) => {
      // const strData = window.atob(b64Data);
      // console.log("strData", strData);
      return pako.ungzip(b64Data, { to: "string" });
    };

    // 鼠标按下事件
    const handleDown = () => {
      state.move = false;
      state.downTime = new Date().getTime();
    };

    // 鼠标移动事件
    const handleMove = () => {
      if (state.downTime) {
        const dragEndTime = new Date().getTime();
        if (dragEndTime - state.downTime > 200) {
          state.move = true;
        }
      }
    };

    // 鼠标离开事件
    const handleLeave = () => {
    };

    // 重置
    const handleReset = () => {
      state.downTime = 0;
      state.move = false;
    };

    // const testZip = () => {
    //   const a = [
    //     {
    //       name: "张三",
    //       age: 10,
    //     },
    //     {
    //       name: "张三",
    //       age: 10,
    //     },
    //     {
    //       name: "张三",
    //       age: 10,
    //     },
    //     {
    //       name: "张三",
    //       age: 10,
    //     },
    //   ];
    // console.log("-----------------------压缩-------------------------");
    // const aStr = JSON.stringify(a);
    // console.log("astr", aStr);
    // const aDeflate = pako.deflate(aStr, { to: "string" });
    // console.log("aDeflate", aDeflate);
    // console.log("window.btoa(aDeflate)", window.btoa(aDeflate));
    // const aDeflate0 = pako.deflate(aStr, { to: "string", level: 0 });
    // console.log("aDeflate0", aDeflate0);
    // console.log("window.btoa(aDeflate0)", window.btoa(aDeflate0));
    // const aDeflate1 = pako.deflate(aStr, { to: "string", level: 1 });
    // console.log("aDeflate1", aDeflate1);
    // console.log("window.btoa(aDeflate1)", window.btoa(aDeflate1));
    // const aDeflate2 = pako.deflate(aStr, { to: "string", level: 2 });
    // console.log("aDeflate2", aDeflate2);
    // console.log("window.btoa(aDeflate2)", window.btoa(aDeflate2));
    // const aDeflate9 = pako.deflate(aStr, { to: "string", level: 9 });
    // console.log("aDeflate9", aDeflate9);
    // console.log("window.btoa(aDeflate9)", window.btoa(aDeflate9));

    // console.log("-----------------------解压-------------------------");
    // const aInflate = pako.inflate(aDeflate, { to: "string" });
    // console.log("aInflate", aInflate);
    // };

    onUnmounted(() => {
      localStorage.removeItem("record");
    });

    return {
      ...toRefs(state),
      handleRecord,
      playRecord,
      handleDown,
      handleLeave,
      handleMove,
    };
  },
});
</script>
    
<style scoped>
.rrweb {
  border-radius: 10px;
  background: #e4e7ed;
  width: 84px;
}
</style>